<template>
	<view>
		<u-subsection :list="list" :current="currentTab" @change="handleTabChange"></u-subsection>
		<view v-if="currentTab === 0">
			<!-- 已预约的内容 -->
			<!-- <text>预约内容:</text> -->
			<view class="appointment-info">
				<view>
					<view class="data-list">
						<view class="data-item" v-for="(item, index) in filteredDataList" :key="index">
							<view class="data-content">
								<view class="data-label flex" :class="item.fontColorClass">
									<image src="/static/icon/时间 (3).png" @tap="handleImageTap" class="image-style">
									</image>
									<text>预约时间：{{ item.dateTime }}</text>
								</view>
								<view class="data-label flex" :class="item.fontColorClass">
									<image src="/static/icon/戒指 (1).png" @tap="handleImageTap" class="image-style">
									</image>
									<text>预约作品：{{ item.imgType }}</text>
								</view>
								<view class="data-label flex" :class="item.fontColorClass">
									<image src="/static/icon/姓名.png" @tap="handleImageTap" class="image-style"></image>
									<text class="name-text">姓名：</text>
									<text style="margin-left: -22rpx;">{{ item.userName }}</text>
								</view>
								<view class="data-label flex" :class="item.fontColorClass">
									<image src="/static/icon/电话.png" @tap="handleImageTap" class="image-style"></image>
									<text>联系电话：{{ item.phone }}</text>
								</view>
								<!-- 	<view class="data-status" :class="item.fontColorClass">
									<text>{{ item.statusText }}</text>
								</view> -->
							</view>
							<view class="container">
								<view class="more-action" @tap="showActionMenu(item)">
									<text class="more-text">更多</text>
								</view>
							</view>
						</view>
						<view class="empty" v-if="dataList.length === 0">
							<view class="empty-content">
								<image src="/static/icon/搜索为空.png" class="image-empty"></image>
								<text class="empty-text">预约信息为空</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<!-- 预约历史的内容 -->
			<!-- <text>预约历史内容:</text> -->
			<view class="appointment-info">
				<view>
					<view class="data-list">
						<view class="data-item" v-for="(item, index) in dataListHistory" :key="index">
							<view class="data-content">
								<view class="data-label flex" :class="item.fontColorClass">
									<image src="/static/icon/时间 (3).png" @tap="handleImageTap" class="image-style">
									</image>
									<text>预约时间：{{ item.dateTime }}</text>
								</view>
								<view class="data-label flex" :class="item.fontColorClass">
									<image src="/static/icon/戒指 (1).png" @tap="handleImageTap" class="image-style">
									</image>
									<text>预约作品：{{ item.imgType }}</text>
								</view>
								<view class="data-label flex" :class="item.fontColorClass">
									<image src="/static/icon/姓名.png" @tap="handleImageTap" class="image-style"></image>
									<text class="name-text">姓名：</text>
									<text style="margin-left: -22rpx;">{{ item.userName }}</text>
								</view>
								<view class="data-label flex" :class="item.fontColorClass">
									<image src="/static/icon/电话.png" @tap="handleImageTap" class="image-style"></image>
									<text>联系电话：{{ item.phone }}</text>
								</view>
								<view class="data-status" :data-status="item.status" :class="item.fontColorClass">
									<text>{{ item.statusText }}</text>
								</view>
							</view>
							<view class="container">
								<view class="more-action" @tap="showActionMenu(item)">
									<text class="more-text">更多</text>
								</view>
							</view>
						</view>
						<view class="empty" v-if="dataListHistory.length === 0">
							<view class="empty-content">
								<image src="/static/icon/搜索为空.png" class="image-empty"></image>
								<text class="empty-text">预约信息为空</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出框 -->
		<view>
			<u-popup :show="show" mode="bottom" @close="close">
				<view class="LoginAlert">
					<p class="AlertText">你未登录，请先登录</p>
					<view class="AlertButton">
						<u-button type="success" text="登录" @click="getEquipment()"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	import request from '@/util/request'
	export default {
		data() {
			return {
				list: [{
					name: '进行中'
				}, {
					name: '历史订单'
				}],
				currentTab: 0, // 默认显示第一个Tab
				actionMenuVisible: false, // 控制操作菜单的显示
				name: '', // 用户姓名，初始为空
				phone: '',
				// 作品名称到数字的映射
				workMap: {
					'银饰': 0,
					'皮具': 1,
					'玻璃': 2,
					'创意手作': 3
				},
				selectedItemId: null,
				// 是否显示模态框
				showModal: false,
				// 选择的时间，初始值为提示信息
				timeValue: '请选择时间',
				// 选择的作品，初始值为提示信息
				selectedWork: '请选择作品',
				// 作品选项列表
				workOptions: ['银饰', '皮具', '玻璃', '创意手作'],
				// 存储所有预约信息
				dataList: [],
				dataListHistory: [],
				// 选中的日期
				selectedDate: '',
				// 一周的日期列表
				weekDates: [],
				// 星期几的名称列表
				weekDays: ["一", "二", "三", "四", "五", "六", "日"],
				// 当前的最大 id
				maxId: 0,
				// 存储预约的状态
				appointmentStatus: {},
				workMapReverse: {
					0: '银饰',
					1: '皮具',
					2: '玻璃',
					3: '创意手作'
				},
				currentNickName: '', // 当前登录的昵称
				isMerchant: false, // 是否是商家
				deviceId: null,
				aboutInfo: {},
				isLogin: false, // 是否登录
				show: false, // 是否显示弹出框
				isMerchantPhone: '',
				merchantPhone: '',
				statusMap: {
					0: '进行中',
					1: '已取消',
					2: '已完成'
				},
			};
		},
		computed: {
			filteredDataList() {
				return this.dataList
					.sort((a, b) => {
						// 直接比较日期时间字符串，升序排序
						return new Date(a.dateTime) - new Date(b.dateTime);
					})
					.map(item => {
						return {
							...item,
							fontColorClass: item.id === this.selectedItemId ? 'selected-font-color' : ''
						};
					});
			},
			// 新增的计算属性，用于对dataListHistory进行排序
			sortedDataListHistory() {
				return this.dataListHistory.sort((a, b) => {
					// 将updateTime字符串转换为日期对象
					const dateA = new Date(a.updateTime);
					const dateB = new Date(b.updateTime);

					// 比较日期，降序排序
					return dateB - dateA;
				});
			}
		},
		onShow: function() {
			this.getUserPhone()
			// 每次页面显示时重新
			this.getPhone()
		},
		onLoad() {
			// 在组件创建时生成一周的日期列表
			this.checkLoginStatus();
			this.generateWeekDates();
			this.getDeviceInfo();
			// 获取用户信息，并根据昵称判断是否为商家
			this.getUserInfo().then(userInfo => {
				const today = new Date();
				const month = String(today.getMonth() + 1).padStart(2, '0');
				const day = String(today.getDate()).padStart(2, '0');
				this.selectedDate = `${month}-${day}`;
				// 判断是否为特定的商家账号
				// this.isMerchant = this.currentNickName === 'diascing_44';
				// this.isMerchant = this.deviceId === '17310330351222778915';
				// 可选：设置name属性为当前昵称
				// this.name = userInfo.nickName;
			});
		},
		// onLoad() {
		// 	this.fetchMerchantAppointments(); // 页面加载时查询已预约数据
		// },
		methods: {
			handleTabChange(index) {
				this.currentTab = index;
				if (index === 1) {
					this.fetchAppointmentsHistory(); // 点击预约历史时查询预约历史数据
				} else if (index === 0) {
					this.getPhone();
				}
			},
			// 获取商家全部预约信息下
			fetchAppointmentsHistory() {
				if (this.isMerchantPhone === this.merchantPhone) {
					request({
						url: '/booking/booking/bookingListByuserId',
						method: 'GET',
					}).then(res => {
						// 筛选出 status 不等于 0 的数据
						this.dataListHistory = res.data.filter(booking => booking.status !== 0).map(
							booking => {
								return {
									...booking,
									statusText: this.statusMap[booking.status] || '未知状态', // 添加状态文本
									imgType: this.workMapReverse[booking.imgType] || '未知作品' // 将数字映射回作品名称
								};
							});
						// this.getPhone();
					}).catch(err => {
						uni.showToast({
							title: '获取预约历史信息失败',
							icon: 'none',
							duration: 2000,
						});
					});
				} else {
					// 普通用户，调用获取个人预约信息的API
					this.fetchUserAppointmentsHistory(this.deviceId);
				}
			},
			//获取用户历史预约数据
			fetchUserAppointmentsHistory() {
				request({
					url: '/booking/booking/bookingListByuserId?userId=' + this.deviceId,
					method: 'GET',
				}).then(res => {
					// 筛选出 status 不等于 0 的数据
					const appointments = res.data.filter(appointment => appointment.status !== 0).map(
						appointment => {
							return {
								...appointment,
								imgType: this.workMapReverse[appointment.imgType] || '未知作品', // 将数字映射回作品名称
								statusText: this.statusMap[appointment.status] || '未知状态' // 添加状态文本
							};
						});
					this.dataListHistory = appointments;
				}).catch(err => {
					uni.showToast({
						title: '获取预约信息失败',
						icon: 'none',
						duration: 2000,
					});
				});
			},

			getUserPhone() {
				return new Promise((resolve, reject) => {
					if (this.isLogin) {
						request({
							url: '/users/getUserById',
							method: 'get',
							data: {
								userId: this.deviceId
							}
						}).then(res => {
							if (res && res.data && res.data.phone) {
								this.isMerchantPhone = res.data.phone;
								resolve(this.isMerchantPhone); // 成功获取电话号码后，通过 resolve 返回电话号码
							} else {
								reject(new Error('无法获取电话号码')); // 如果响应中没有电话号码，拒绝 Promise
							}
						}).catch(err => {
							reject(err); // 如果请求出错，拒绝 Promise
						});
					} else {
						reject(new Error('用户未登录')); // 如果用户未登录，拒绝 Promise
					}
				});
			},
			getDeviceInfo() {
				const systemInfo = uni.getSystemInfoSync(); // 获取系统信息
				this.deviceId = systemInfo.deviceId; // 提取设备ID
				// 获取商家的电话
				// this.getPhone();
			},
			checkLoginStatus() {
				// 检查登录状态，这里可以调用后端接口或检查本地存储
				this.isLogin = uni.getStorageSync('isLogin') || false;
			},
			handleAddClick() {
				if (this.isLogin) {
					// 用户已登录，显示添加预约的模态框
					this.showModal = true;
				} else {
					// 用户未登录，显示弹出框提示登录
					this.show = true;
				}
			},
			close() {
				this.show = false;
			},
			getEquipment() {
				// 获取设备信息 
				const systemInfo = uni.getSystemInfoSync();
				// 提取设备号（唯一标识符） 
				const deviceId = systemInfo.deviceId;
				// 输出设备号 
				wx.getUserProfile({
					desc: '获取你的头像和昵称',
					success: (res) => {
						request({
							url: '/users/login',
							method: 'post',
							data: deviceId
						})
						uni.setStorage({
							key: 'isLogin',
							data: true
						})
						uni.setStorage({
							key: 'isUser',
							data: res.userInfo
						})
						uni.reLaunch({
							url: "/pages/booking/index"
						})
					},
					fail: (err) => {}
				});
			},
			getUserInfo() {
				// 这里应该是调用后端接口获取用户信息
				// 模拟的用户信息获取
				return new Promise((resolve) => {
					const userInfo = uni.getStorageSync('isUser') || {
						nickName: '' // 这里应该是实际的用户昵称
					};
					resolve(userInfo);
				});
			},
			fetchAppointments() {
				// 首先获取用户信息，确保 this.isMerchantPhone 有值
				this.getUserInfo().then(userInfo => {
					if (!this.isLogin) {
						return; // 如果未登录，则不执行查询
					}
					// 等待获取电话号码的 Promise
					this.getUserPhone().then(phone => {
						// 根据设备ID判断用户类型，并获取预约信息
						if (this.isMerchantPhone === this.merchantPhone) {
							this.fetchMerchantAppointments();
						} else {
							// 普通用户，调用获取个人预约信息的API
							this.fetchUserAppointments(this.deviceId);
						}
					}).catch(error => {
						// console.error('获取电话号码失败:', error);
					});
				});
			},
			// 获取商家的预约信息
			fetchMerchantAppointments() {
				request({
					url: '/booking/booking/selectBookings',
					method: 'GET'
				}).then(res => {
					const appointments = res.data.map(appointment => {
						return {
							...appointment,
							imgType: this.workMapReverse[appointment.imgType] || '未知作品', // 将数字映射回作品名称
							statusText: this.statusMap[appointment.status] || '未知状态' // 添加状态文本
						};
					});
					this.dataList = appointments;
				}).catch(err => {
					uni.showToast({
						title: '获取预约信息失败',
						icon: 'none',
						duration: 2000,
					});
				});
			},
			// 获取普通用户的预约信息
			fetchUserAppointments() {
				request({
					url: '/booking/booking/selectBookingsByUser?userId=' + this.deviceId,
					method: 'GET',
				}).then(res => {
					const appointments = res.data.map(appointment => {
						return {
							...appointment,
							imgType: this.workMapReverse[appointment.imgType] || '未知作品', // 将数字映射回作品名称
							statusText: this.statusMap[appointment.status] || '未知状态' // 添加状态文本
						};
					});
					this.dataList = appointments;
				}).catch(err => {
					uni.showToast({
						title: '获取预约信息失败',
						icon: 'none',
						duration: 2000,
					});
				});
			},
			showActionMenu(item) {
				if (!item) {
					return;
				}
				// 设置当前选中的预约信息 ID
				this.selectedItemId = item.id;

				let itemList = [];

				// 如果预约状态为已取消(1)或已完成(2)，则只展示“删除订单”按钮
				if (item.status === 1 || item.status === 2) {
					itemList.push('删除订单');
				} else {
					// 无论是商家还是非商家，都会添加“拨打电话”选项
					itemList.push('拨打电话');

					// 如果不是商家，则添加“取消预约”选项
					if (this.isMerchantPhone !== this.merchantPhone) {
						itemList.push('取消预约');
					} else {
						// 如果是商家，则添加“完成订单”和“取消预约”选项
						itemList.unshift('完成订单'); // 将“完成订单”添加到数组的第一个位置
						itemList.push('取消预约'); // 将“取消预约”添加到数组的末尾
					}
				}

				wx.showActionSheet({
					itemList: itemList,
					success: (res) => {
						const tapIndex = res.tapIndex;
						if (itemList.length === 1) {
							// 如果只有一个选项，即“删除订单”
							this.deleteAppointmentById(item);
						} else if (tapIndex === 0 && this.isMerchant) {
							// 如果是商家，第一个选项是“完成订单”
							this.completeOrder(item);
						} else if (tapIndex === 0 && !this.isMerchant) {
							// 如果不是商家，第一个选项是“拨打电话”
							this.callPhone(item);
						} else if (tapIndex === 1 && this.isMerchant) {
							// 如果是商家，第二个选项是“拨打电话”
							this.callPhone(item);
						} else if (tapIndex === 1 && !this.isMerchant) {
							// 如果不是商家，第二个选项是“取消预约”
							this.deleteAppointment(item);
						} else if (tapIndex === 2 && this.isMerchant) {
							// 如果是商家，第三个选项是“取消预约”
							this.deleteAppointment(item);
						}
					},
					fail: () => {
						// 取消选中预约信息
						this.selectedItemId = null;
					}
				});
			},
			deleteAppointmentById(appointment) {
				if (appointment && appointment.id !== undefined) {
					// 显示确认提示框
					let content; // 声明一个变量用于存储提示内容
					content = `您即将删除这条预约记录，是否继续？`;
					wx.showModal({
						title: '提示',
						content: content, // 使用if语句确定的提示内容
						success: (res) => {
							if (res.confirm) {
								request({
									url: `/booking/booking/deleteBookingById?id=${appointment.id}`,
									method: 'Delete'
								}).then(res => {
									wx.showToast({
										title: '订单已删除',
										icon: 'none',
										duration: 2000,
									});
									this.fetchAppointmentsHistory();
								}).catch(err => {
									wx.showToast({
										title: '订单删除失败',
										icon: 'none',
										duration: 2000,
									});
								});
							}
						}
					});
				}
			},
			completeOrder(appointment) {
				if (appointment && appointment.id !== undefined) {
					// 显示确认提示框
					let content; // 声明一个变量用于存储提示内容
					content = `您即将完成 ${appointment.userName} ${appointment.dateTime} 预约到店的订单，是否继续？`;
					wx.showModal({
						title: '提示',
						content: content, // 使用if语句确定的提示内容
						success: (res) => {
							if (res.confirm) {
								request({
									url: `/booking/booking/completeOrder?id=${appointment.id}`,
									method: 'PUT'
								}).then(res => {
									wx.showToast({
										title: '订单已完成',
										icon: 'none',
										duration: 2000,
									});
									this.fetchAppointments();
								}).catch(err => {
									wx.showToast({
										title: '订单完成失败',
										icon: 'none',
										duration: 2000,
									});
								});
							}
						}
					});
				}
			},
			getPhone() {
				//获取电话
				// this.getUserPhone();
				request({
					url: '/about/query',
					method: 'GET',
				}).then(res => {
					this.aboutInfo = res;
					this.merchantPhone = this.aboutInfo.data.phone
					this.isMerchant = this.isMerchantPhone === this.aboutInfo.data.phone; //商家
					this.fetchAppointments();
				})
			},
			callPhone(appointment) {
				// 确保 appointment 对象中有电话号码的属性
				const phoneNumber = this.isMerchant ? appointment.phone : this.aboutInfo.data.phone;
				if (phoneNumber) {
					wx.makePhoneCall({
						phoneNumber: phoneNumber, // 需要拨打的电话号码
					});
				} else {
					wx.showToast({
						title: '没有可拨打的电话',
						icon: 'none'
					});
				}
			},
			contactMerchant() {
				if (this.isMerchant) {
					// 商家跳转到与用户单线联系的页面
					uni.switchTab({
						url: `/pages/bookingHistory/index`
					});
				} else {
					// 用户跳转到联系客服页面
					uni.switchTab({
						url: '/pages/my/index'
					});
				}
			},
			deleteAppointment(appointment) {
				if (appointment && appointment.id !== undefined) {
					// 显示确认提示框
					let content; // 声明一个变量用于存储提示内容
					if (this.isMerchant) { // 判断是否是商家
						content = `您即将取消 ${appointment.userName} ${appointment.dateTime} 到店的预约，是否取消？`;
					} else {
						content = `您即将取消${appointment.dateTime}到店的预约，是否取消？`;
					}

					wx.showModal({
						title: '提示',
						content: content, // 使用if语句确定的提示内容
						success: (res) => {
							if (res.confirm) {
								request({
									url: `/booking/booking/updateBookingStatus?id=${appointment.id}`,
									method: 'PUT'
								}).then(res => {
									wx.showToast({
										title: '预约已取消',
										icon: 'none',
										duration: 2000,
									});
									this.fetchAppointments();
								}).catch(err => {
									wx.showToast({
										title: '预约取消失败',
										icon: 'none',
										duration: 2000,
									});
								});
							}
						}
					});
				}
			},
			hideModal() {
				// 隐藏模态框
				this.showModal = false;
			},
			selectDate(date) {
				// 处理日期选择事件，更新选中的日期
				this.selectedDate = date;
			},
			generateWeekDates() {
				const today = new Date();
				const startDay = today.getDate();
				for (let i = 0; i < 7; i++) {
					const date = new Date(today.getFullYear(), today.getMonth(), startDay + i);
					// 使用 yyyy-MM-dd 格式，这是iOS支持的格式之一
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					this.weekDates.push(`${date.getFullYear()}-${month}-${day}`);
				}
			},
			formatDate(date) {
				const day = new Date(date);
				const dayNum = String(day.getDate()).padStart(2, '0');
				return `${dayNum}`;
			},
			getDayName(date) {
				const day = new Date(date);
				const dayOfWeek = day.getDay();
				// 由于 JavaScript 中 getDay() 返回的星期天是 0，我们需要对结果进行调整
				// 减去 1 以匹配您的 weekDays 数组，该数组从星期日（0）开始
				return this.weekDays[dayOfWeek];
			},
			getDotClass(date) {
				const count = this.dataList.filter(item => item.dateTime && item.dateTime.startsWith(date)).length;
				if (count > 3) {
					return 'red-dot';
				} else if (count > 0) {
					return 'green-dot';
				}
				return '';
			}
		}
	};
</script>
<style scoped>
	.data-status {
		position: absolute;
		/* 设置为绝对定位 */
		color: #888;
		/* 字体颜色 */
		margin-left: 77%;
		margin-top: 11%;
		font-size: 25rpx;
		color: #3C9CFF;
		/* font-weight: bolder; */
	}

	/* 已取消状态的样式 */
	.data-status[data-status="1"] {
		color: #F8935D;
	}

	/* 已完成状态的样式 */
	.data-status[data-status="2"] {
		color: #3C9CFF;
		/* 蓝色字体 */
	}

	.name-text {
		letter-spacing: 24rpx;
		margin-left: 8rpx;
	}

	.container {
		position: relative;
		/* 设为相对定位，作为绝对定位子元素的参考 */
	}

	.more-action {
		position: absolute;
		/* 设为绝对定位 */
		right: -630rpx;
		/* 距离右边的距离 */
		bottom: 8rpx;
		/* 距离底部的距离 */
		padding: 10rpx 20rpx;
		border-radius: 4rpx;
		font-size: 27rpx;
		text-align: center;
		/* 居中对齐文本 */
		color: #888;
		/* font-weight: 550; */
	}

	.name {
		margin-right: 8px;
		/* 根据需要调整间距 */
		white-space: nowrap;
		/* 防止标签换行 */
		margin-bottom: 10px;
		font-size: 35rpx;
		color: #666;
		padding: 5rpx;
		letter-spacing: 27rpx;
		margin-left: 10rpx;
	}

	.phone {
		margin-right: 8px;
		/* 根据需要调整间距 */
		white-space: nowrap;
		/* 防止标签换行 */
		margin-bottom: 10px;
		font-size: 35rpx;
		color: #666;
		padding: 5rpx;
		/* letter-spacing: 2rpx; */
		margin-left: 10rpx;
	}

	.modal {
		/* 模态框的定位和样式 */
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.empty {
		/* 空状态容器的样式 */
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.empty-content {
		/* 空状态内容的样式 */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.image-empty {
		/* 空状态图片的样式 */
		width: 400rpx;
		height: 500rpx;
		margin-bottom: 20rpx;
		margin-top: -30rpx;
	}

	.empty-text {
		/* 空状态文字的样式 */
		font-size: 25rpx;
		margin-top: -95rpx;
		color: #cdcdcd;
	}

	.image-style {
		/* 图标样式 */
		width: 55rpx;
		height: 55rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.image-style:first-child {
		margin-left: 0;
	}

	.data-item {
		/* 预约信息项的样式 */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 10px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.data-content {
		/* 预约信息内容容器的样式 */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.title {
		/* 预约信息标题的样式 */
		font-size: 36rpx;
		margin-left: 25rpx;
		margin-top: 38rpx;
		color: #0056b3;
	}

	/* 弹出框文字 */
	.AlertText {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	/* 弹出框 */
	.LoginAlert {
		width: 95%;
		height: 200rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.data-list {
		/* 预约信息列表的样式 */
		margin-top: 20px;
	}

	.data-label {
		display: flex;
		align-items: center;
		font-size: 27rpx;
		color: #888;
		margin-bottom: 5px;
		font-weight: blod;
	}
</style>